<template>
  <div class="home">
    <div class="topContent">
      <!-- 右侧按钮 -->
      <div class="topIcon">
        <span class="data_iocn" @click="paramFilterClick">
          <svg-icon
            :icon-class="attributeSelectName != '' ? 'params_select' : 'params'"
            style="margin-right: 10px"
          />
          <span class="params_tip" v-if="attributeSelects.length == 0"
            >请选择关注的参数</span
          >
          <span class="params_attr" v-if="attributeSelects.length > 0">{{
            attributeSelectName
          }}</span>
          <i
            class="el-icon-arrow-down"
            style="margin: 0 14px 0 3px; color: #cccccc"
          ></i>
        </span>
        <el-divider direction="vertical" class="top-divider"></el-divider>
        <span class="data_iocn">
          <svg-icon
            :icon-class="dataBtn == 1 ? 'detail_select' : 'detail'"
            @click="detailClick"
          />
        </span>
        <span class="data_iocn">
          <svg-icon
            :icon-class="dataBtn == 2 ? 'browse_select' : 'browse'"
            @click="browseClick"
          />
        </span>
        <span class="data_iocn">
          <svg-icon
            :icon-class="dataBtn == 4 ? 'time_select' : 'time'"
            @click="timeClick"
          />
        </span>
        <div class="checkboxStyle" v-show="boxShow">
          <div class="position">
            <el-row>
              <el-checkbox-group
                class="messageGroup"
                v-model="attributeSelects"
                @change="attributeChange"
              >
                <el-col
                  :span="24"
                  class="colStyle"
                  v-for="attribute in filterAttributes"
                  :key="attribute.token"
                >
                  <el-checkbox
                    :label="attribute.token + ':' + attribute.name"
                    style="color: #666666"
                    >{{ attribute.name }}</el-checkbox
                  >
                </el-col>
              </el-checkbox-group>
            </el-row>
          </div>
          <div class="bottom">
            <div class="bottom-btn">
              <el-button size="mini" @click="cancelBtn">取消</el-button>
              <el-button type="primary" size="mini" @click="submitBtn"
                >确定</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div style="width: 75%; margin-left: 1%">
        <span class="words">
          Token：
          <span class="words_value">{{ deviceData.token }}</span>
        </span>
        <span class="words">
          设备名称：
          <span class="words_value">{{ deviceData.name }}</span>
        </span>
        <span class="words">
          设备类型：
          <span class="words_value">{{ deviceData.deviceType.name }}</span>
        </span>
      </div>
    </div>
    <!-- 详情视图 -->
    <device-large-screen-data
      :deviceToken="deviceToken"
      :deviceTypeToken="deviceTypeToken"
      ref="deviceLargeScreenData"
      v-if="dataBtn == 1"
    />
    <device-run-time-data-list
      v-init-screen-h
      :deviceToken="deviceToken"
      :deviceTypeToken="deviceTypeToken"
      :pageNum="pageNum"
      :pageSize="pageSize"
      @setPageToatl="setPageToatl"
      ref="deviceRunTimeDataList"
      v-if="dataBtn == 2"
      class="deviceRunTimeDataList"
    />
    <device-run-time-data-history
      :deviceTypeToken="deviceTypeToken"
      :deviceActiveAssignmentsToken="deviceActiveAssignmentsToken"
      :pageNum="pageNum"
      :pageSize="pageSize"
      @setPageToatl="setPageToatl"
      ref="deviceRunTimeDataHistory"
      v-if="dataBtn == 4"
    ></device-run-time-data-history>
    <Pagination
      v-if="pageShow"
      @pagination="pagination"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      :pageSizes.sync="pageSizes"
    />
  </div>
</template>

<script>
import deviceLargeScreenData from "./deviceLargeScreenData.vue";
import deviceRunTimeDataList from "./deviceRunTimeDataList.vue";
import deviceRunTimeDataHistory from "./deviceRunTimeDataHistory.vue";
import Pagination from "@/views/common/page";
import { getDeviceLists } from "@/api/device";
import { getDeviceTypeAttributes } from "@/api/deviceType";
export default {
  components: {
    deviceLargeScreenData,
    deviceRunTimeDataList,
    deviceRunTimeDataHistory,
    Pagination,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      boxShow: false,
      pageShow: false,
      dataBtn: 1,
      deviceToken: this.$route.query.deviceToken,
      deviceTypeToken: "",
      deviceActiveAssignmentsToken: "",
      filterAttributes: [],
      attributeSelects: [],
      attributeSelectTokens: [],
      attributeSelectName: "",
      deviceData: {
        deviceType: "",
      },
    };
  },
  mounted() {
    this.getDeviceByToken();
  },
  methods: {
    // 获取设备详情
    getDeviceByToken() {
      var that = this;
      var param = { includeAssignment: true, includeDeviceType: true };

      getDeviceLists(param, `/${that.deviceToken}`).then((res) => {
        const r = res.data;
        that.deviceData = r;
        that.deviceTypeToken = r.deviceType.token;
        that.deviceActiveAssignmentsToken =
          r.activeDeviceAssignments && r.activeDeviceAssignments.length
            ? r.activeDeviceAssignments[0].token
            : "";
        this.getDeviceRunTimeFilterData();
        this.$nextTick(() => {
          that.$refs.deviceLargeScreenData.init();
        });
      });
    },
    //筛选参数列表
    getDeviceRunTimeFilterData() {
      var params = {
        page: 1,
        pageSize: 0,
      };
      getDeviceTypeAttributes(params, this.deviceTypeToken).then((res) => {
        this.filterAttributes = res.data.results;
      });
    },
    //筛选参数
    paramFilterClick() {
      if (this.boxShow == false) {
        this.boxShow = true;
      } else {
        this.boxShow = false;
      }
    },
    //参数改变触发
    attributeChange(data) {
      this.attributeSelectTokens = [];
      this.attributeSelectName = "";
      data.forEach((v) => {
        this.attributeSelectTokens.push(v.split(":")[0]);
        if (this.attributeSelectName) {
          this.attributeSelectName =
            this.attributeSelectName + "; " + v.split(":")[1];
        } else {
          this.attributeSelectName = v.split(":")[1];
        }
      });
    },
    cancelBtn() {
      this.boxShow = false;
    },
    //参数筛选提交
    submitBtn() {
      if (this.dataBtn == 1) {
        this.$refs.deviceLargeScreenData.attributeSelectTokens =
          this.attributeSelectTokens;
        this.$refs.deviceLargeScreenData.handleParamsFilter();
      } else if (this.dataBtn == 2) {
        this.$refs.deviceRunTimeDataList.attributeSelectTokens =
          this.attributeSelectTokens;
        this.$refs.deviceRunTimeDataList.handleParamsFilter();
      } else if (this.dataBtn == 4) {
        this.$refs.deviceRunTimeDataHistory.attributeSelectTokens =
          this.attributeSelectTokens;
        this.$refs.deviceRunTimeDataHistory.handleParamsFilter();
      }
      this.boxShow = false;
    },
    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      if (this.dataBtn == 2) {
        //实时数据概览视图
        this.$nextTick(() => {
          this.$refs.deviceRunTimeDataList.init();
        });
      } else if (this.dataBtn == 4) {
        this.$nextTick(() => {
          this.$refs.deviceRunTimeDataHistory.getDeviceRunTimeData();
        });
      }
    },
    //回调设置total
    setPageToatl(total) {
      this.total = total;
    },
    //详情视图
    detailClick() {
      this.pageShow = false;
      if (this.dataBtn != 1) {
        this.dataBtn = 1;
        this.$nextTick(() => {
          this.$refs.deviceLargeScreenData.attributeSelectTokens =
            this.attributeSelectTokens;
          this.$refs.deviceLargeScreenData.init();
        });
      }
    },
    //概览视图
    browseClick() {
      this.pageShow = true;
      if (this.dataBtn != 2) {
        this.dataBtn = 2;
        this.$nextTick(() => {
          this.$refs.deviceRunTimeDataList.attributeSelectTokens =
            this.attributeSelectTokens;
          this.$refs.deviceRunTimeDataList.init();
        });
      }
    },
    //历史数据
    timeClick() {
      this.pageShow = true;
      if (this.dataBtn != 4) {
        this.dataBtn = 4;
        this.$nextTick(() => {
          this.$refs.deviceRunTimeDataHistory.attributeSelectTokens =
            this.attributeSelectTokens;
          this.$refs.deviceRunTimeDataHistory.init();
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/style/deviceCss/attributeStyle.css";
.home {
  width: 100%;
  background-color: #fff;
}
.topContent {
  margin-left: 20px;
  margin-bottom: 21px;
  padding-top: 21px;
  .words {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #333333;
    margin-right: 20px;
    .words_value {
      color: #666666;
      font-weight: 400;
    }
  }
}
.topIcon {
  margin: 0 15px 0 0;
  float: right;
  position: relative;
}
.deviceRunTimeDataList {
  margin-top: 5px;
}
</style>